<template>
     <div id="eagleMapContainer" title="" :style="{'width':changeWidth+'px','height':changeHeight+'px'}">
            <p>元素可拖拽</p>
            <div id="eagleMap">
                <!-- <l-map>

                </l-map> -->
            </div>
            <div id="tl">
                <div title="拖动调整大小-左上方" id="move_tl">左上</div>
            </div>
            <div id="tr" @mousedown="dragEagle">
                <div title="拖动调整大小-右上方" id="move_tz">右上</div>
            </div>
            <div id="bl">
                <div title="拖动调整大小-左下方" id="move_bl">左下</div>
            </div>
            <div id="br">
                <div title="拖动调整大小-右下方" id="move_br">右下</div>
            </div>
       </div>
</template>
 
<script>
    export default {
        name: "changetest",
        data () {
            return {
                changeWidth:150,
                changeHeight:150
            }
        },
        methods: {
            dragEagle:function(e){
                console.log(e);
                // 鼠标按下时，拖动前
                let targetDiv= document.getElementById('eagleMapContainer'); //e.target.parentNode.parentNode;.children[0]
                //得到点击时该地图容器的宽高：
                let targetDivWidth = targetDiv.offsetWidth;
                let targetDivHeight = targetDiv.offsetHeight;
                let startX = e.clientX;
                let startY = e.clientY;
                // let _this=this;
                //鼠标拖动时
                document.onmousemove = function(e){//
                    // console.log(e);
                    e.preventDefault();
                    //得到鼠标拖动的宽高距离：取绝对值
                    let distX = Math.abs(e.clientX-startX);
                    let distY = Math.abs(e.clientY-startY);    
                    //往右上方拖动：
                    if(e.clientX > startX && e.clientY < startY){
                        targetDiv.style.width = targetDivWidth+distX+'px';
                        targetDiv.style.height = targetDivHeight+distY+'px';
                    }
                    //往左下方拖动：
                    if (e.clientX < startX && e.clientY > startY) {
                        targetDiv.style.width = (targetDivWidth-distX)+'px';
                        targetDiv.style.height = (targetDivHeight-distY)+'px';
                    }
                    //设置最大最小范围：不能无限制缩放，影响体验
                    if(parseInt(targetDiv.style.width)>=500){
                        targetDiv.style.width = 500+'px';
                    }
                    if(parseInt(targetDiv.style.width)<=150){
                        targetDiv.style.width = 150+'px';
                    }
                    if(parseInt(targetDiv.style.height)>=500){
                        targetDiv.style.height = 500+'px';
                    }
                    if(parseInt(targetDiv.style.height)<=150){
                        targetDiv.style.height = 150+'px';
                    }
                }
                // 鼠标抬起，拖动结束时
                document.onmouseup = () => {
                    document.onmousemove=null;
                }
            }
        }
    }
</script>
 
<style scoped>
#eagleMapContainer{
    position: absolute; 
    left: 45%; 
    bottom: 0; 
    z-index: 200; 
    overflow: hidden; 
    visibility: visible; 
    /* width: 200px;  */
    /* height: 200px; */
    background: black;
}
#eagleMap {
    width: 100%; 
    height: 100%; 
    top: 0px;      
    right: 0px;
    position: absolute;
    z-index: 1000;
}
#tr,#tl{
    position: absolute; 
    background: red;
    right: 1px; 
    top: 1px; 
    width: 28px; 
    height: 28px; 
    cursor: ne-resize; 
    z-index: 200001; 
    background-image: url("");
}
#tl {
    left: 1px;
    /* background: red; */
}
#tr:hover{
    background-color: #666;
    /* background-image: "images/arrow.png"; */
}
#move_tr,#move_tl{
    position: absolute;
    right: 0px; 
    top: 0px; 
    width: 27px; 
    height: 20px; 
    cursor: ne-resize; 
    z-index: 100; 
    background-image: url(""); 
    background-position: 0px 0px;
}
#move_tl {
    left: 0px;
    cursor: nw-resize; 
}

#bl,#br{
    position: absolute; 
    background: blue;
    right: 1px; 
    bottom: 1px; 
    width: 28px; 
    height: 28px; 
    cursor: ne-resize; 
    z-index: 200001; 
    background-image: url("");
}
#bl {
    /* background: rgb(132, 209, 31); */
    left: 1px;
}
#move_br,#move_bl{
    position: absolute;
    right: 0px; 
    bottom: 0px; 
    width: 27px; 
    height: 20px; 
    cursor: se-resize; 
    z-index: 100; 
    background-image: url(""); 
    background-position: 0px 0px;
}
/* 左下 */
#move_bl {
    left: 0px;
    cursor: sw-resize; 
}
</style>